<template>
  <div
    class="custom-product-style-container"
    :style="{
      color: themeStyle[theme].textColor1,
      border: '1px solid ' + themeStyle[theme].borderColor1
    }"
  >
    <div class="item-row">
      <div class="item">
        <span style="width: 27px">长</span>
        <Input
          v-model:value="Nodedata.simData.product.width"
          size="small"
          type="number"
          style="width: 70px"
        />
      </div>
      <div class="item">
        <span>宽</span>
        <Input
          v-model:value="Nodedata.simData.product.height"
          size="small"
          type="number"
          style="width: 70px"
        />
      </div>
    </div>
    <div class="item-row">
      <div class="item">
        <span>框宽</span>
        <Input
          v-model:value="Nodedata.simData.product.borderWidth"
          size="small"
          type="number"
          style="width: 70px"
        />
      </div>
      <div class="item">
        <span>圆角</span>
        <Input
          v-model:value="Nodedata.simData.product.borderRadius"
          size="small"
          type="number"
          style="width: 60px"
        />
      </div>
    </div>
    <div class="item-row">
      <div class="item">
        <span>边框颜色</span>
        <Input
          v-model:value="Nodedata.simData.product.borderColor"
          size="small"
          type="color"
          style="width: 40px"
        />
        <Input
          v-model:value="Nodedata.simData.product.borderColor"
          size="small"
          type="text"
          style="width: 108px"
        />
      </div>
    </div>
    <div class="item-row">
      <div class="item">
        <span>背景颜色</span>
        <Input
          v-model:value="Nodedata.simData.product.backgroundColor"
          size="small"
          type="color"
          style="width: 40px"
        />
        <Input
          v-model:value="Nodedata.simData.product.backgroundColor"
          size="small"
          type="text"
          style="width: 108px"
        />
      </div>
    </div>

    <!-- 预览 -->
    <div class="preview-text">预览</div>
    <div class="preview-content">
      <div
        class="preview-color-block"
        :style="{
          width: Nodedata.simData.product.width + 'px',
          height: Nodedata.simData.product.height + 'px',
          borderRadius: Nodedata.simData.product.borderRadius + 'px',
          border:
            Nodedata.simData.product.borderWidth +
            'px solid ' +
            Nodedata.simData.product.borderColor,
          backgroundColor: Nodedata.simData.product.backgroundColor
        }"
      ></div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { useStyleStore } from '@renderer/store/globalStyle/style'
import { Nodedata } from './nodeProTemHook'
import { storeToRefs } from 'pinia'
import { Input } from 'ant-design-vue'

const globalStyleStore = useStyleStore()
const { theme, themeStyle } = storeToRefs(globalStyleStore)
</script>

<style scoped lang="scss">
.custom-product-style-container {
  width: 215px;
  height: 300px;
  font-size: $font-size-medium;
  padding: 5px;

  .item-row {
    display: flex;
    gap: 10px;
    justify-content: space-between;
    margin-bottom: 5px;

    .item {
      display: flex;
      gap: 5px;
      :deep(.ant-input-sm) {
        border-radius: 0px;
      }
    }
  }
  .preview-text {
    margin-top: 10px;
    border-top: 1px solid #cecece;
    color: #449bd1;
  }
  .preview-content {
    height: 150px;
    overflow: hidden;
    width: 100%;
    background-color: #f7f7f7;
    display: flex;
    justify-content: center;
    align-items: center;
  }
}
</style>
